<template>
  <line-charts :option="area" :resizable="resizable"></line-charts>
</template>

<script>
import LineCharts from 'vue-echarts-v3/src/lite.js'
import 'echarts/lib/chart/line'
export default {
  data () {
    return {
      resizable: true,
      area: {
        title: {
          text: '浏览趋势',
          textStyle: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 14,
            color: '#69e2fd'
          },
          top: 10,
          left: 24
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: '#3B506E'
            }
          },
          axisLabel: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 10,
            color: '#A1A1B3'
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#3B506E'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#3B506E'
            }
          },
          axisLabel: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 10,
            color: '#A1A1B3'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#3B506E'
            }
          }
        },
        legend: {
          top: 10,
          right: 20,
          data: [{
            name: 'PV',
            textStyle: {
              fontFamily: 'PingFangSC-Regular',
              fontSize: 10,
              color: '#FFFFFF'
            }
          }, {
            name: 'UV',
            textStyle: {
              fontFamily: 'PingFangSC-Regular',
              fontSize: 10,
              color: '#FFFFFF'
            }
          }]
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        series: [
          {
            name: 'PV',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            lineStyle: {
              color: 'rgba(0,224,108,1)'
            },
            itemStyle: {
              normal: {
                color: 'rgba(0,224,108,1)'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(10,224,108,0.8)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0,224,108,0.3)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            smooth: true
          },
          {
            name: 'UV',
            data: [720, 732, 601, 334, 1490, 1230, 920],
            type: 'line',
            lineStyle: {
              color: 'rgba(254,117,120,1)'
            },
            itemStyle: {
              normal: {
                color: 'rgba(254,117,120,1)'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(254,117,120,0.8)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(254,117,120,0.3)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            smooth: true
          }
        ]
      }
    }
  },
  components: {
    LineCharts
  }
}
</script>

<style lang="less" scoped>

</style>
